<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-15
  Time: 下午8:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">

        body{
            background: rgba(0,0,0,0.3);
        }
        a{
            text-decoration: none;
        }

        .parent{
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .itemList{
            height: 90%;
            width: 100%;
            padding: 10px;
        }
        .limit{
            margin: 0 auto;
            text-align: center;
            align-content: center;
            height: 10%;
        }

        .parent .itemList .item{
            width: 154px;
            height: 240px;
            background: rgba(0,0,0,0.3);
            margin-left: 28px;
            float: left;
            margin-bottom: 20px;
            cursor: pointer;
            display: block;
            color: #fff;
        }

        .parent .itemList .item:hover{
            transform: scale(1.05,1.05);
        }

        .parent .itemList .item img{
            display: block;
            height: 180px;
            width: 100%;
            background: gainsboro;
            text-align: center;
            align-content: center;
        }

        .parent .itemList .item span{
            display: block;
            height: 30px;
            width: 100%;
            padding-left: 6px;
            padding-right: 6px;
            text-align: center;
            align-content: center;
            line-height: 30px;
        }
    </style>
</head>

<script type="text/javascript">
    /**
     *
     * @param url:跳转地址
     * @param type:类型，next为上一页，previous为下一页
     * @param page：当前页码
     * @param allPage：所有页数
     */
    function change(url,type,page,allPage) {
        //控制上一页下一页不出现越界的情况
        var previous=document.getElementById("previous")
        var next=document.getElementById("next");
        if (type=='previous' && page-1>=1){
            previous.href=url+"?"+"page="+(page-1);
        }else if (type=='next' && page+1<=allPage){
            next.href=url+"?"+"page="+(page+1);
        }
    }
</script>

<body>

<div class="parent">
    <div class="itemList">

        <%--遍历获取商品列表--%>
        <c:forEach items="${item}" var="p">
            <a class="item" href="/futer/itemDetail?name=${p.name}">
                <img src="${p.img}"/>
                <span>${p.name}</span>
                <span>￥${p.price}</span>
            </a>
        </c:forEach>

    </div>

    <nav aria-label="Page navigation" class="limit">
        <ul class="pagination">
            <li>
                <a aria-label="Previous" onclick="change('/futer/market','previous',${currentPage},${allPage})" id="previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <c:forEach items="${page}" var="p">

                <%--判断当前p值是不是当前的页码,是则设置id，一遍改变页码按钮颜色--%>
                <c:if test="${p==currentPage}">
                    <li><a href="/futer/market?page=${p}" id="currentPageNum">${p}</a></li>
                </c:if>

                <c:if test="${p!=currentPage}">
                    <li><a href="/futer/market?page=${p}">${p}</a></li>
                </c:if>

            </c:forEach>
            <li>
                <a  aria-label="Next" onclick="change('/futer/market','next',${currentPage},${allPage})" id="next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<script type="text/javascript">


    if ('${login}'=='login'){
        parent.sengToLogin();
    }
    //修改当前页码按钮颜色
    var currentPageNum=document.getElementById("currentPageNum");
    currentPageNum.style.background='#B2B2B3';
</script>

</body>
</html>
